var RenYuan = new Vue({

    el : '#JingshangTongjilist',
    data :{

        tongjibiao:{},


    },
    created : function() {

        this.findTongjibiao();


    },
    methods : {


        findTongjibiao: function(){
            var _this = this;

            $.post("../renyuan/find_tongjibiao",{
                rdm : Math.random()
            },function(ppData){
                layer.closeAll("loading");
                if (ppData != null){
                    if(ppData.result == "1"){
                        _this.tongjibiao=ppData.resultContent;

                        _this.createTongjibiao();

                    }else{
                        layer.alert(ppData.message);
                    }
                }

            },"json");
        },

        createTongjibiao: function (){
            var _this=this;
            //获取dom容器
            var myChart = echarts.init(document.getElementById('tongji'));
            option = {
                title : {
                    text: '经商办企业情况统计表',
                    subtext: ''
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['纳入规范范围人数','存在经商办企业行为人数']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                grid:{
                    left:'10%',
                    bottom:'35%'
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['总人数','上将战区正职及相应职级','中将战区副职及相应职级','少将军级正职及相应职级','少将军级副职及相应职级','大校师级正职及相应职级','大校师级副职及相应职级','上校团级正职及相应职级'],
                        axisLabel:{
                            interval:0,
                            rotate:40
                        },

                    },

                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'纳入规范范围人数',
                        type:'bar',
                        data:[_this.tongjibiao.quanbu, _this.tongjibiao.shangjiangquanbu, _this.tongjibiao.zhongjiangquanbu, _this.tongjibiao.shaojiangzhengquanbu, _this.tongjibiao.shaojiangfuquanbu, _this.tongjibiao.daxiaozhengquanbu, _this.tongjibiao.daxiaofuquanbu,_this.tongjibiao.shangxiaozhengquanbu],
                       /* markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }*/
                    },
                    {
                        name:'存在经商办企业行为人数',
                        type:'bar',
                        data:[_this.tongjibiao.jingshang, _this.tongjibiao.shangjiangjingshang, _this.tongjibiao.zhongjiangjingshang, _this.tongjibiao.shaojiangzhengjingshang, _this.tongjibiao.shaojiangfujingshang, _this.tongjibiao.daxiaozhengjingshang, _this.tongjibiao.daxiaofujingshang,_this.tongjibiao.shangxiaozhengjingshang],
                        /*markPoint : {
                            data : [
                                {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                                {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }*/
                    }
                ]
            };


            console.log(option);

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            var myChart2 = echarts.init(document.getElementById('tongjibing'));
            option2 = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['上将战区正职','中将战区副职','少将军级正职','少将军级副职','大校师级正职','大校师级副职','上校团级正职']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : false,
                series : [
                    {
                        name:'存在经商办企业行为人数',
                        type:'pie',
                        selectedMode: 'single',
                        avoidLabelOverlap: true,
                        radius : [0, 220],

                        // for funnel
                        x: '20%',
                        width: '40%',
                        funnelAlign: 'right',


                        itemStyle : {
                            normal : {
                                label : {
                                    position : 'inner'
                                },
                                labelLine : {
                                    show : false
                                }
                            }
                        },
                        data:[
                            {value:_this.tongjibiao.shangjiangjingshang, name:'上将战区正职'},
                            {value:_this.tongjibiao.zhongjiangjingshang, name:'中将战区副职'},
                            {value:_this.tongjibiao.shaojiangzhengjingshang, name:'少将军级正职', selected:true},
                            {value:_this.tongjibiao.shaojiangfujingshang, name:'少将军级副职'},
                            {value:_this.tongjibiao.daxiaozhengjingshang , name:'大校师级正职'},
                            {value:_this.tongjibiao.daxiaofujingshang, name:'大校师级副职'},
                            {value:_this.tongjibiao.shangxiaozhengjingshang, name:'上校团级正职'}
                        ]
                    },
                    {
                        name:'纳入规范范围人数',
                        type:'pie',
                        radius : [250, 320],

                        // for funnel
                        x: '60%',
                        width: '35%',
                        funnelAlign: 'left',


                        data:[
                            {value:_this.tongjibiao.shangjiangquanbu, name:'上将战区正职'},
                            {value:_this.tongjibiao.zhongjiangquanbu, name:'中将战区副职'},
                            {value:_this.tongjibiao.shaojiangzhengquanbu, name:'少将军级正职', selected:true},
                            {value:_this.tongjibiao.shaojiangfuquanbu, name:'少将军级副职'},
                            {value:_this.tongjibiao.daxiaozhengquanbu , name:'大校师级正职'},
                            {value:_this.tongjibiao.daxiaofuquanbu, name:'大校师级副职'},
                            {value:_this.tongjibiao.shangxiaozhengquanbu, name:'上校团级正职'}
                        ]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);
        },
    },

    /*eChart:function(imageId,typeArr){
        var _this = this;
    var ListFirstArr = new Array();

    // 列名
    var XArr = new Array();

    // 值
    var dataArr = new Array();

    var item={
        name: '存在经商办企业行为人数',
        type: 'bar',
        data: [_this.tongjibiao.jingshang, _this.tongjibiao.shangjiangjingshang, _this.tongjibiao.zhongjiangjingshang, _this.tongjibiao.shaojiangzhengjingshang, _this.tongjibiao.shaojiangfujingshang, _this.tongjibiao.daxiaozhengjingshang, _this.tongjibiao.daxiaofujingshang],
    };
    ListFirstArr.push(item);

    var myChart = echarts.init(document.getElementById(imageId));

    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        toolbox: {  //很关键的一个功能，自由切换柱状图曲线图的工具盒子
            show : true,  //让它显示
            feature : {
                mark : {show: true},
                magicType : {show: true, type: ['line', 'bar']},  //类型让他两种都存在
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        legend: {
            data:typeArr
        },
        title:{
            text:typeArr,
            x:'center',
            y:'top',
            textAlign: 'center'
        },
        xAxis : [
            {
                type : 'value'


            }
        ],
        grid: {
            x:40,
            x2:100,
            y2:150,
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },

        yAxis : [
            {
                type : 'category',
                data : XArr,
                /!* type : 'value'*!/
            }
        ],
        series : [{
            data:dataArr,
            type:'bar',
            itemStyle:{
                normal:{
                    color:function(params){
                        var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622'];
                        return colorList[params.dataIndex]
                    },
                    label:{
                        show:true,
                        position:'right'
                    }
                }
            }
        }]

    }
    myChart.setOption(option);
}*/




});
